<template>
  <!-- 文件浏览器主容器 -->
  <div class="file-explorer">
    <!-- 遍历可见的文件/文件夹项目 -->
    <div 
      v-for="item in visibleItems"
      :key="item.path"
      class="item"
      :style="{ paddingLeft: (item.level) * 20 + 'px' }"
      @click="item.isFolder ? toggleFolder(item) : handleFileClick(item)"
    >
      <!-- 如果是文件夹，显示展开/折叠箭头 -->
      <span v-if="item.isFolder" class="arrow">
        {{ openedFolders.has(item.path) ? '▼' : '▶' }}
      </span>
      <!-- 显示文件/文件夹图标 -->
      <span class="icon">
        {{ item.isFolder ? '📁' : '📄' }}
      </span>
      <!-- 显示文件/文件夹名称 -->
      <span class="name" :title="!item.isFolder ? item.path : undefined">{{ item.name }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allItems: [],
      openedFolders: new Set()
    }
  },
  computed: {
    visibleItems() {
      return this.allItems.filter(item => {
        // 根目录直接显示
        if (item.level === 0) return true
        
        // 获取父目录路径（基于层级结构）
        const parentPath = item.parentPath
        return this.openedFolders.has(parentPath)
      })
    }
  },
  mounted() {
    fetch('/api/v1/fs/list')
      .then(res => res.json())
      .then(data => {
        this.processData(data.data)
        this.openedFolders.add("") // 自动展开根目录
      })
      .catch(console.error)
  },
  methods: {
    processData(node, level = 0, parentPath = "", parentKey = "") {
      // 生成基于层级的路径
      // const currentPath = parentPath ? `${parentPath}\\${node.name}` : node.name
      const currentPath = node.path    
      const currentKey = parentKey ? `${parentKey}/children/${node.name}` : node.name
      
      this.allItems.push({
        name: node.name,
        path: currentPath,
        parentPath: parentPath,
        isFolder: node.isFolder,
        level: level,
        key: currentKey // 唯一标识符
      })
      
      if (node.children) {
        node.children.forEach(child => {
          this.processData(child, level + 1, currentPath, currentKey)
        })
      }
    },
    toggleFolder(item) {
      if (!item.isFolder) return
      
      const path = item.path
      this.openedFolders.has(path) 
        ? this.openedFolders.delete(path)
        : this.openedFolders.add(path)
        
      this.$forceUpdate()
    },
    async handleFileClick(item) {
      try {
        const response = await fetch(`/api/v1/fs/get?path=${encodeURIComponent(item.path)}`)
        const data = await response.json()
        // 触发自定义事件，将文件内容和路径传递给父组件
        this.$emit('file-content-update', {
          content: data.data.content,
          path: item.path
        })
      } catch (error) {
        console.error('获取文件内容失败:', error)
      }
    }
  }
}
</script>

<style>
/* 保持原有样式不变 */
.file-explorer {
  width: 300px;
  border: 1px solid #eee;
  font-family: Arial;
  padding: 10px;
}

.item {
  display: flex;
  align-items: center;
  padding: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.item:hover {
  background: #f8f8f8;
}

.arrow {
  width: 20px;
  color: #666;
  font-size: 12px;
}

.icon {
  margin-right: 8px;
}

.name {
  color: #333;
  font-size: 14px;
}
</style>